<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js" integrity="sha256-NGC9JEuTWN4GhTj091wctgjzftr+8WNDmw0H8J5YPYE=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/InventivetalentDev/MineRender@1.4.6/dist/skin.min.js"></script>
<!-- <script src="/SkinRender/jquery.min.js"></script>
<script src="/SkinRender/three.min.js"></script>
<script src="/SkinRender/skin.min.js"></script>

script src="/SkinRender/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/SkinRender/three.min.js" integrity="sha256-NGC9JEuTWN4GhTj091wctgjzftr+8WNDmw0H8J5YPYE=" crossorigin="anonymous"></script>
<script src="/SkinRender/skin.min.js"></script> -->


<style>
        .skin-container {
            width: 278px; /* 方框的宽度 */
            height: 300px; /* 方框的高度 */
            border: 2px solid #000; /* 方框边框 */
            position: relative; /* 确保可以绝对定位子元素 */
            overflow: hidden; /* 防止内容溢出 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: 
                linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2)),
                linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2));
            background-size: 10px 10px; /* 方格大小 */
        }
</style>

<body>

<!-- <div id="mySkinContainer" class="skin-container"></div> 皮肤渲染容器 -->

        <div class="skin-container" id="skin1"></div>
        <div class="skin-container" id="skin2"></div>
        <div class="skin-container" id="skin3"></div>
    <script>
        
        
        function renderSkin(containerId, skinUrl) {
                var container = document.getElementById(containerId);
                var skinRender = new SkinRender({
                    autoResize: true,
                    render: {
                        taa: true
                    }
                }, container);

                // 默认启用动画
                var animate = true;

                skinRender.render({
                    url: skinUrl,
                    optifine: true
                });

                // 动画效果
                var startTime = Date.now();
                container.addEventListener("skinRender", function (e) {
                    if (animate) {
                        var t = (Date.now() - startTime) / 1000;
                        e.detail.playerModel.children[2].rotation.x = Math.sin(t * 5) / 2; // 左腿
                        e.detail.playerModel.children[3].rotation.x = -Math.sin(t * 5) / 2; // 右腿
                        e.detail.playerModel.children[4].rotation.x = Math.sin(t * 5) / 2; // 左臂
                        e.detail.playerModel.children[5].rotation.x = -Math.sin(t * 5) / 2; // 右臂
                    }
                });


                var k=0.48;
            container.addEventListener("skinRender", function(e) {
                // 设置缩放
                e.detail.playerModel.scale.set(k,k,k); // 将模型缩小为原来的50%
                
                // 设置位置
                e.detail.playerModel.position.set(0, 9.6, 0); // 调整位置以使模型在容器内居中
            });
            }

            renderSkin("skin1", "http://60.205.190.110/mc_skin/skin/1.png");
            renderSkin("skin2", "http://60.205.190.110/mc_skin/skin/2.png");
            renderSkin("skin3", "http://60.205.190.110/mc_skin/skin/3.png");

        
    </script>


    
</body>



<script>
    // var skinRender = new SkinRender({/* options */}, document.getElementById("mySkinContainer"));
    // var skinUrl = "skin/1.png";
    // skinRender.render(skinUrl);
</script> 








</html>


<!-- 
var skinRender = new SkinRender({
                autoResize: true,
                render: {
                    taa: true
                }
            }, document.body);
            skinRender.render({
                username: location.hash ? location.hash.substring(1) : "inventivetalent",
                capeUrl: "https://minerender.org/img/optifine_cape.png",
                optifine: true
            });
            if (location.hash) $("#nameInput").val(location.hash.substring(1));
            $("#nameInput,#capeInput,#slim").on("change", function () {
                skinRender.clearScene();
                var skin = $("#nameInput").val();
                var cape = $("#capeInput").val();
                var slim =  $("#slim").is(":checked");
                var options = {};
                if (skin.indexOf("http") === 0) {
                    options.url = skin;
                } else {
                    options.username = skin;
                    location.hash = skin;
                }
                if (cape && cape.length > 0) {
                    if (cape.includes("capes.dev") || !cape.startsWith("http")) { // capes.dev link or type
                        options.cape = cape;
                    } else {
                        options.capeUrl = cape;
                        options.optifine = cape.toLowerCase().indexOf("optifine") > 0;
                    }
                }
                options.slim = slim;
                skinRender.render(options);
            })

            $(".partToggle").on("change", function () {
                skinRender.getModelByName($(this).attr("id")).visible = $(this).is(":checked");
            });

            var animate = true;
            $("#animate").on("change", function () {
                animate = $(this).is(":checked");
            });



            var startTime = Date.now();
            document.body.addEventListener("skinRender", function (e) {
                if (animate) {
                    var t = (Date.now() - startTime) / 1000;
                    e.detail.playerModel.children[2].rotation.x = Math.sin(t * 5) / 2;
                    e.detail.playerModel.children[3].rotation.x = -Math.sin(t * 5) / 2;
                    e.detail.playerModel.children[4].rotation.x = Math.sin(t * 5) / 2;
                    e.detail.playerModel.children[5].rotation.x = -Math.sin(t * 5) / 2;
                }
            })
         -->